<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动下拉框</title>
<!--引入js文件-->
<script src="js/data.js"></script>
<script src="js/vue.min.js"></script>
</head>
<body>
	<div>
		<select id="province" @change="selProvince()">
			<option value="none">--选择省--</option>
			<option v-for="(value, key) in provinces" :value="key" >{{value}}</option>
		</select>
		<br><br>
		<hr/>
		<br>
		<div id="seleDiv">
			<select id="city" @change="selCity()">
				<option>--选择市--</option>
				<option v-for="(value, key) in cities" :value="key" >{{value}}</option>
			</select>
			<span id="districtSpan">
			<select id="district">
				<option>--选择区--</option>
				<option v-for="(value, key) in districts" :value="key" >{{value}}</option>
			</select>
		</span>
		</div>
	</div>
	<script>
		let v = new Vue({
			el:"body>div",
			data:{
				provinces: chineseDistricts['86'],
				cities: {},
				districts: {}
			},
			methods:{
				selProvince(){
					let v1 =document.querySelector("#province").value
					v.cities = chineseDistricts[v1]
				},
				selCity(){
					let v1 =document.querySelector("#city").value
					v.districts = chineseDistricts[v1]
				}
			}
		})
	</script>
</body>
</html>

